<template>
  <view class="order-detail">
    <scroll-view scroll-y class="content">
      <!-- 订单状态 -->
      <view class="status-card">
        <view class="status-icon">{{ getStatusIcon(orderInfo.status) }}</view>
        <view class="status-text" :style="{ color: getStatusColor(orderInfo.status) }">
          {{ getStatusText(orderInfo.status) }}
        </view>
        <view class="status-desc">{{ getStatusDesc(orderInfo.status) }}</view>
      </view>

      <!-- 订单信息 -->
      <view class="section">
        <view class="section-title">📋 订单信息</view>
        <view class="info-card">
          <view class="info-row">
            <text class="label">订单号</text>
            <text class="value">{{ orderInfo.orderNo }}</text>
          </view>
          <view class="info-row">
            <text class="label">服务类型</text>
            <view class="value">
              <text class="category-icon">{{ getCategoryIcon(orderInfo.categoryName) }}</text>
              <text>{{ orderInfo.categoryName }}</text>
            </view>
          </view>
          <view class="info-row">
            <text class="label">下单时间</text>
            <text class="value">{{ orderInfo.createTime }}</text>
          </view>
          <view class="info-row" v-if="orderInfo.payTime">
            <text class="label">支付时间</text>
            <text class="value">{{ orderInfo.payTime }}</text>
          </view>
          <view class="info-row" v-if="orderInfo.acceptTime">
            <text class="label">接单时间</text>
            <text class="value">{{ orderInfo.acceptTime }}</text>
          </view>
        </view>
      </view>

      <!-- 取件信息 -->
      <view class="section">
        <view class="section-title">📍 取件信息</view>
        <view class="info-card">
          <view class="address-row">
            <text class="label">取件地址</text>
            <text class="address">{{ orderInfo.pickupAddress }}</text>
          </view>
          <view class="info-row" v-if="orderInfo.pickupCode">
            <text class="label">取件码</text>
            <text class="value code">{{ orderInfo.pickupCode }}</text>
          </view>
          <view class="info-row" v-if="orderInfo.pickupRemark">
            <text class="label">取件备注</text>
            <text class="value">{{ orderInfo.pickupRemark }}</text>
          </view>
          
          <!-- 第一组图片展示 -->
          <view class="image-row" v-if="firstImageList && firstImageList.length > 0">
            <text class="label">{{ getFirstImageLabel() }}</text>
            <view class="images">
              <image 
                v-for="(img, index) in firstImageList" 
                :key="index"
                :src="img" 
                mode="aspectFill"
                class="upload-image"
                @click="handlePreviewImage(firstImageList, index)"
              />
            </view>
          </view>
          
          <!-- 第二组图片展示 -->
          <view class="image-row" v-if="secondImageList && secondImageList.length > 0">
            <text class="label">{{ getSecondImageLabel() }}</text>
            <view class="images">
              <image 
                v-for="(img, index) in secondImageList" 
                :key="index"
                :src="img" 
                mode="aspectFill"
                class="upload-image"
                @click="handlePreviewImage(secondImageList, index)"
              />
            </view>
          </view>
          
          <view class="image-row" v-if="orderInfo.pickupImages">
            <text class="label">取件照片</text>
            <view class="images">
              <image 
                v-for="(img, index) in pickupImageList" 
                :key="index"
                :src="img" 
                mode="aspectFill"
                class="upload-image"
                @click="handlePreviewImage(pickupImageList, index)"
              />
            </view>
          </view>
          <view class="info-row" v-if="orderInfo.pickupTime">
            <text class="label">取件时间</text>
            <text class="value">{{ orderInfo.pickupTime }}</text>
          </view>
        </view>
      </view>

      <!-- 收货信息 -->
      <view class="section">
        <view class="section-title">📦 收货信息</view>
        <view class="info-card">
          <view class="address-row">
            <text class="label">送达地址</text>
            <text class="address">{{ orderInfo.deliveryAddress }}</text>
          </view>
          <view class="info-row">
            <text class="label">收件人</text>
            <text class="value">{{ orderInfo.receiverName }}</text>
          </view>
          <view class="info-row">
            <text class="label">手机号</text>
            <text class="value">{{ orderInfo.receiverPhone }}</text>
          </view>
          <view class="info-row" v-if="orderInfo.deliveryRemark">
            <text class="label">送达备注</text>
            <text class="value">{{ orderInfo.deliveryRemark }}</text>
          </view>
          <view class="image-row" v-if="orderInfo.deliveryImages">
            <text class="label">送达照片</text>
            <view class="images">
              <image 
                v-for="(img, index) in deliveryImageList" 
                :key="index"
                :src="img" 
                mode="aspectFill"
                class="upload-image"
                @click="handlePreviewImage(deliveryImageList, index)"
              />
            </view>
          </view>
          <view class="info-row" v-if="orderInfo.deliveryTime">
            <text class="label">送达时间</text>
            <text class="value">{{ orderInfo.deliveryTime }}</text>
          </view>
        </view>
      </view>

      <!-- 用户信息
      <view class="section">
        <view class="section-title">👥 用户信息</view>
        <view class="info-card">
          <view class="user-row">
            <text class="label">发布人</text>
            <view class="user-info">
              <text class="name">{{ orderInfo.userName }}</text>
              <text class="phone">{{ orderInfo.userPhone }}</text>
            </view>
          </view>
          <view class="user-row" v-if="orderInfo.deliveryUserName">
            <text class="label">接单人</text>
            <view class="user-info">
              <text class="name">{{ orderInfo.deliveryUserName }}</text>
              <text class="phone">{{ orderInfo.deliveryUserPhone }}</text>
            </view>
          </view>
        </view>
      </view> -->

      <!-- 费用信息 -->
      <view class="section">
        <view class="section-title">💰 费用信息</view>
        <view class="fee-card">
          <!-- 发布者：显示实付金额和退款信息 -->
          <template v-if="isPublisher">
            <view class="fee-row total">
              <text class="label">实付金额</text>
              <text class="value">¥{{ orderInfo.actualAmount }}</text>
            </view>
            
            <!-- 退款信息（仅在已退款或退款审核中时显示） -->
            <template v-if="orderInfo.status === 8 || orderInfo.status === 9">
              <view class="fee-row refund" v-if="orderInfo.refundAmount">
                <text class="label">退款金额</text>
                <text class="value refund-amount">¥{{ orderInfo.refundAmount }}</text>
              </view>
              
              <!-- 补偿说明（仅代取订单且有补偿金额时显示） -->
              <view class="fee-row compensation-note" v-if="orderInfo.compensationAmount && orderInfo.compensationAmount > 0">
                <text class="label">补偿给接单人</text>
                <text class="value compensation-amount">¥{{ orderInfo.compensationAmount }}</text>
              </view>
              
              <!-- 退款说明 -->
              <view class="refund-note">
                <text class="note-text">
                  <template v-if="orderInfo.status === 8">
                    退款已完成，
                    <template v-if="orderInfo.compensationAmount && orderInfo.compensationAmount > 0">
                      其中 ¥{{ orderInfo.compensationAmount }} 作为补偿金支付给接单人
                    </template>
                    <template v-else>
                      全额退款
                    </template>
                  </template>
                  <template v-else-if="orderInfo.status === 9">
                    退款申请审核中，请耐心等待
                  </template>
                </text>
              </view>
            </template>
          </template>
          
          <!-- 接单人：显示收益和退款信息 -->
          <template v-else>
            <view class="fee-row rider-earning">
              <!-- <text class="label">我的收益</text> -->
              <!-- <text class="value">¥{{ orderInfo.riderEarning }}</text> -->
              <text class="label">订单金额</text>
              <text class="value">¥{{ orderInfo.actualAmount }}</text>            
            </view>
            
            <!-- 退款相关说明 -->
            <template v-if="orderInfo.status === 8">
              <view class="refund-note">
                <text class="note-text">
                  <template v-if="orderInfo.compensationAmount && orderInfo.compensationAmount > 0">
                    订单已退款，您获得 ¥{{ orderInfo.compensationAmount }} 补偿金
                  </template>
                  <template v-else>
                    订单已退款，无补偿金
                  </template>
                </text>
              </view>
            </template>
            
            <!-- 退款审核中提示 -->
            <template v-else-if="orderInfo.status === 9">
              <view class="refund-note">
                <text class="note-text">
                  发布人申请退款，正在审核中
                </text>
              </view>
            </template>
          </template>
        </view>
      </view>

      <!-- 状态流转 -->
      <view class="section">
        <view class="section-title">📊 状态流转</view>
        <view class="timeline-card">
          <view 
            v-for="(step, index) in timelineSteps" 
            :key="index"
            class="timeline-item"
            :class="{ active: step.active }"
          >
            <view class="timeline-dot">
              <view class="dot" :class="{ active: step.active }"></view>
              <view class="line" v-if="index < timelineSteps.length - 1"></view>
            </view>
            <view class="timeline-content">
              <view class="step-name">{{ step.name }}</view>
              <view class="step-time">{{ step.time || '-' }}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="footer" v-if="showActions">
      <view class="actions">
        <!-- 商家操作 -->
        <template v-if="isMerchant">
          <!-- 商家查看待结算订单时显示结算按钮 -->
          <button v-if="orderInfo.status === 5" class="btn-primary" @click="handleMerchantSettle">
            确认结算
          </button>
        </template>
        
        <!-- 根据角色和状态显示不同按钮 -->
        <template v-else-if="isPublisher">
          <!-- 发布方操作 -->
          <button v-if="orderInfo.status === 0" class="btn-secondary" @click="handleCancel">取消订单</button>
          <button v-if="orderInfo.status === 0" class="btn-primary" @click="handlePay">去支付</button>
          
          <button v-if="orderInfo.status === 1" class="btn-secondary" @click="handleCancel">取消订单</button>
          <button v-if="orderInfo.status === 1" class="btn-text" @click="handleRefund">申请退款</button>
          
          <button v-if="orderInfo.status === 2" class="btn-secondary" @click="handleContact">联系接单人</button>
          <button v-if="orderInfo.status === 2" class="btn-text" @click="handleRefund">申请退款</button>
          
          <button v-if="orderInfo.status === 3" class="btn-secondary" @click="handleContact">联系接单人</button>
          <button v-if="orderInfo.status === 3" class="btn-text" @click="handleRefund">申请退款</button>
          
          <button v-if="orderInfo.status === 4" class="btn-secondary" @click="handleContact">联系接单人</button>
          <button v-if="orderInfo.status === 4" class="btn-primary" @click="handleConfirm">确认收货</button>
        </template>
        
        <template v-else>
          <!-- 接单方操作 -->
          <button v-if="orderInfo.status === 2" class="btn-secondary" @click="handleContact">联系发布人</button>
          <button v-if="orderInfo.status === 2" class="btn-primary" @click="showPickupUpload">确认取件</button>
          
          <button v-if="orderInfo.status === 3" class="btn-secondary" @click="handleContact">联系发布人</button>
          <button v-if="orderInfo.status === 3" class="btn-primary" @click="showDeliverUpload">确认送达</button>
          
          <button v-if="orderInfo.status === 5" class="btn-secondary" @click="handleContact">联系发布人</button>
          <button v-if="orderInfo.status === 5" class="btn-primary" @click="handleApplySettlement">申请结算</button>
        </template>
      </view>
    </view>

    <!-- 取件照片上传弹窗 -->
    <view class="popup-mask" v-if="showPickupPopup" @click="closePickupPopup">
      <view class="upload-popup" @click.stop>
        <view class="popup-header">
          <text class="popup-title">上传取件照片</text>
          <text class="popup-close" @click="closePickupPopup">✕</text>
        </view>
        <view class="popup-content">
          <MultiImageUploader
            :images.sync="pickupImages"
            title="取件照片"
            tip="建议拍摄物品照片作为取件凭证"
            :max-count="3"
            module="order/pickup"
            @upload-success="onPickupImageUpload"
          />
        </view>
        <view class="popup-footer">
          <button class="btn-cancel" @click="closePickupPopup">取消</button>
          <button class="btn-confirm" @click="handlePickup">确认取件</button>
        </view>
      </view>
    </view>

    <!-- 送达照片上传弹窗 -->
    <view class="popup-mask" v-if="showDeliverPopup" @click="closeDeliverPopup">
      <view class="upload-popup" @click.stop>
        <view class="popup-header">
          <text class="popup-title">上传送达照片</text>
          <text class="popup-close" @click="closeDeliverPopup">✕</text>
        </view>
        <view class="popup-content">
          <MultiImageUploader
            :images.sync="deliveryImages"
            title="送达照片"
            tip="建议拍摄送达现场照片作为送达凭证"
            :max-count="3"
            module="order/delivery"
            @upload-success="onDeliveryImageUpload"
          />
        </view>
        <view class="popup-footer">
          <button class="btn-cancel" @click="closeDeliverPopup">取消</button>
          <button class="btn-confirm" @click="handleDeliver">确认送达</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { 
  getPickupOrderDetail, 
  cancelPickupOrder, 
  payPickupOrder,
  confirmPickup,
  confirmDeliver,
  confirmReceive
} from '@/api/pickup'
import { mapGetters } from 'vuex'
import { getOrderStatusDisplay } from '@/utils/orderStatus'
import MultiImageUploader from '@/components/MultiImageUploader.vue'

export default {
  components: {
    MultiImageUploader
  },
  data() {
    return {
      orderId: '',
      orderInfo: {},
      pickupImages: [],
      deliveryImages: [],
      showPickupPopup: false,
      showDeliverPopup: false
    }
  },
  computed: {
    ...mapGetters('user', ['userInfo', 'userType']),
    
    // 订单类型（从订单信息中获取）
    orderType() {
      return this.orderInfo.orderType || 2
    },
    
    // 当前登录用户ID
    currentUserId() {
      return this.userInfo?.id || ''
    },
    
    // 是否是商家
    isMerchant() {
      return this.userType === 3
    },
    
    // 是否是发布方
    isPublisher() {
      return this.orderInfo.userId && String(this.orderInfo.userId) === String(this.currentUserId)
    },
    
    // 是否是接单方
    isTaker() {
      return this.orderInfo.deliveryUserId && String(this.orderInfo.deliveryUserId) === String(this.currentUserId)
    },
    
    // 是否显示操作按钮
    showActions() {
      const status = this.orderInfo.status
      // 已完成、已取消、已退款不显示操作按钮
      if ([6, 7, 8].includes(status)) {
        return false
      }
      // 对于发布人，待结算(5)也不显示操作按钮（因为显示为"已完成"）
      if (this.isPublisher && status === 5) {
        return false
      }
      return true
    },
    
    // 第一组图片列表（快递单号/订单截图）
    firstImageList() {
      if (!this.orderInfo.firstImage) return []
      try {
        return JSON.parse(this.orderInfo.firstImage)
      } catch (e) {
        console.error('解析firstImage失败:', e)
        return []
      }
    },
    
    // 第二组图片列表（身份码/取餐码截图）
    secondImageList() {
      if (!this.orderInfo.secondImage) return []
      try {
        return JSON.parse(this.orderInfo.secondImage)
      } catch (e) {
        console.error('解析secondImage失败:', e)
        return []
      }
    },
    
    // 取件照片列表
    pickupImageList() {
      if (!this.orderInfo.pickupImages) return []
      try {
        // 尝试解析JSON数组
        const parsed = JSON.parse(this.orderInfo.pickupImages)
        return Array.isArray(parsed) ? parsed : []
      } catch (e) {
        console.error('解析pickupImages失败:', e)
        // 如果JSON解析失败，尝试用逗号分割（兼容旧数据）
        return this.orderInfo.pickupImages.split(',').filter(img => img.trim())
      }
    },
    
    // 送达照片列表
    deliveryImageList() {
      if (!this.orderInfo.deliveryImages) return []
      try {
        // 尝试解析JSON数组
        const parsed = JSON.parse(this.orderInfo.deliveryImages)
        return Array.isArray(parsed) ? parsed : []
      } catch (e) {
        console.error('解析deliveryImages失败:', e)
        // 如果JSON解析失败，尝试用逗号分割（兼容旧数据）
        return this.orderInfo.deliveryImages.split(',').filter(img => img.trim())
      }
    },
    
    // 状态流转步骤
    timelineSteps() {
      const steps = [
        { name: '下单成功', time: this.orderInfo.createTime, active: true },
        { name: '支付成功', time: this.orderInfo.payTime, active: !!this.orderInfo.payTime },
        { name: '已接单', time: this.orderInfo.acceptTime, active: !!this.orderInfo.acceptTime },
        { name: '已取件', time: this.orderInfo.pickupTime, active: !!this.orderInfo.pickupTime },
        { name: '配送中', time: null, active: this.orderInfo.status >= 3 },
        { name: '已送达', time: this.orderInfo.deliveryTime, active: !!this.orderInfo.deliveryTime }
      ]
      
      // 接单人才显示"待结算"步骤
      if (this.isTaker) {
        steps.push(
          { name: '待结算', time: this.orderInfo.confirmTime, active: this.orderInfo.status >= 5 },
          { name: '已完成', time: this.orderInfo.finishTime, active: this.orderInfo.status === 6 }
        )
      } else {
        // 发布人直接显示"已完成"
        steps.push(
          { name: '已完成', time: this.orderInfo.confirmTime, active: this.orderInfo.status >= 5 }
        )
      }
      
      return steps
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
    this.loadOrderDetail()
  },
  methods: {
    // 加载订单详情
    async loadOrderDetail() {
      try {
        uni.showLoading({ title: '加载中...' })
        const orderDetail = await getPickupOrderDetail(this.orderId)
        this.orderInfo = orderDetail
      } catch (error) {
        console.error('加载订单详情失败:', error)
        uni.showToast({ title: error.msg || '加载失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },

    // 支付订单
    handlePay() {
      const orderType = this.orderType || 2
      uni.navigateTo({
        url: `/pages/order/payment?orderId=${this.orderId}&orderType=${orderType}`
      })
    },

    // 取消订单
    handleCancel() {
      uni.showModal({
        title: '取消订单',
        content: '确定要取消这个订单吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({ title: '取消中...' })
              await cancelPickupOrder(this.orderId, '用户取消')
              uni.hideLoading()
              uni.showToast({ title: '订单已取消', icon: 'success' })
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            } catch (error) {
              uni.hideLoading()
              uni.showToast({ title: error.msg || '取消失败', icon: 'none' })
            }
          }
        }
      })
    },

    // 显示取件照片上传弹窗
    showPickupUpload() {
      this.showPickupPopup = true
    },

    // 关闭取件照片上传弹窗
    closePickupPopup() {
      this.showPickupPopup = false
    },

    // 取件图片上传成功
    onPickupImageUpload(data) {
      //console.log('取件图片上传成功:', data)
    },

    // 确认取件
    async handlePickup() {
      try {
        uni.showLoading({ title: '确认中...' })
        // 将图片数组转换为JSON字符串
        const pickupImagesJson = JSON.stringify(this.pickupImages)
        await confirmPickup(this.orderId, { pickupImages: pickupImagesJson })
        
        uni.hideLoading()
        uni.showToast({ title: '取件成功', icon: 'success' })
        
        // 关闭弹窗
        this.closePickupPopup()
        
        // 重置图片数组
        this.pickupImages = []
        
        // 重新加载订单详情
        this.loadOrderDetail()
      } catch (error) {
        uni.hideLoading()
        uni.showToast({ title: error.msg || '操作失败', icon: 'none' })
      }
    },

    // 显示送达照片上传弹窗
    showDeliverUpload() {
      this.showDeliverPopup = true
    },

    // 关闭送达照片上传弹窗
    closeDeliverPopup() {
      this.showDeliverPopup = false
    },

    // 送达图片上传成功
    onDeliveryImageUpload(data) {
      //console.log('送达图片上传成功:', data)
    },

    // 确认送达
    async handleDeliver() {
      try {
        uni.showLoading({ title: '确认中...' })
        // 将图片数组转换为JSON字符串
        const deliveryImagesJson = JSON.stringify(this.deliveryImages)
        await confirmDeliver(this.orderId, { deliveryImages: deliveryImagesJson })
        
        uni.hideLoading()
        uni.showToast({ title: '送达成功，等待用户确认收货', icon: 'success' })
        
        // 关闭弹窗
        this.closeDeliverPopup()
        
        // 重置图片数组
        this.deliveryImages = []
        
        // 重新加载订单详情
        this.loadOrderDetail()
      } catch (error) {
        uni.hideLoading()
        uni.showToast({ title: error.msg || '操作失败', icon: 'none' })
      }
    },

    // 确认收货
    handleConfirm() {
      uni.showModal({
        title: '确认收货',
        content: '确认已收到物品吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({ title: '确认中...' })
              await confirmReceive(this.orderId)
              uni.hideLoading()
              uni.showToast({ title: '收货成功', icon: 'success' })
              this.loadOrderDetail()
            } catch (error) {
              uni.hideLoading()
              uni.showToast({ title: error.msg || '确认失败', icon: 'none' })
            }
          }
        }
      })
    },

    // 申请结算（接单人）
    handleApplySettlement() {
      uni.navigateTo({
        url: `/pages/settlement/apply?orderId=${this.orderId}`
      })
    },

    // 商家确认结算
    async handleMerchantSettle() {
      uni.showModal({
        title: '确认结算',
        content: `确认向接单人结算 ¥${this.orderInfo.riderEarning || 0} 吗？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({ title: '结算中...' })
              
              // 调用结算API
              const { settleOrder } = require('@/api/pickup')
              await settleOrder(this.orderId)
              
              uni.hideLoading()
              uni.showToast({ title: '结算成功', icon: 'success' })
              
              // 重新加载订单详情
              setTimeout(() => {
                this.loadOrderDetail()
              }, 1500)
            } catch (error) {
              console.error('结算失败:', error)
              uni.hideLoading()
              uni.showToast({ title: error.msg || '结算失败', icon: 'none' })
            }
          }
        }
      })
    },

    // 申请退款
    handleRefund() {
      uni.navigateTo({
        url: `/pages/order/refund-apply?orderId=${this.orderId}&orderType=2`
      })
    },

    // 联系用户
    handleContact() {
      let phone = ''
      
      if (this.isPublisher) {
        // 发布人联系接单人
        phone = this.orderInfo.deliveryUserPhone
      } else {
        // 接单人联系发布人，优先使用 userPhone，其次使用 receiverPhone
        phone = this.orderInfo.userPhone || this.orderInfo.receiverPhone
      }
      
      if (!phone) {
        uni.showToast({ title: '暂无联系方式', icon: 'none' })
        return
      }
      
      uni.showActionSheet({
        itemList: [`拨打电话: ${phone}`, '复制手机号'],
        success: (res) => {
          if (res.tapIndex === 0) {
            uni.makePhoneCall({ phoneNumber: phone })
          } else if (res.tapIndex === 1) {
            uni.setClipboardData({ data: phone })
          }
        }
      })
    },

    // 预览图片
    handlePreviewImage(urls, current) {
      uni.previewImage({ urls, current })
    },

    // 获取分类图标
    // 获取第一组图片标签
    getFirstImageLabel() {
      // 其他服务：按分类名优先处理
      if ((this.orderInfo.categoryName || '').includes('其他')) {
        return '相关图片'
      }
      const serviceType = this.orderInfo.serviceType
      switch (serviceType) {
        case 2: return '快递单号截图'
        case 3: return '外卖订单截图'
        case 4: return '奶咖订单截图'
        default: return '订单截图'
      }
    },
    
    // 获取第二组图片标签
    getSecondImageLabel() {
      const serviceType = this.orderInfo.serviceType
      switch (serviceType) {
        case 2: return '身份码截图'
        case 3: return '取餐码截图'
        case 4: return '取餐码截图'
        default: return '取餐码截图'
      }
    },

    getCategoryIcon(categoryName) {
      const iconMap = {
        '取外卖': '🍱',
        '取快递': '📦',
        '取咖啡': '☕',
        '代取奶咖': '☕',
        '代买': '🛒',
        '其他服务': '🐰'
      }
      return iconMap[categoryName] || '📦'
    },

    // 获取显示的状态值（发布人视角转换）
    getDisplayStatus(status) {
      // 对于发布人，待结算(5)应该显示为已完成(6)
      if (this.isPublisher && status === 5) {
        return 6
      }
      return status
    },

    // 获取状态文本（使用统一的订单状态工具函数）
    getStatusText(status) {
      const displayStatus = this.getDisplayStatus(status)
      const statusInfo = getOrderStatusDisplay(this.orderType, displayStatus)
      return statusInfo.text
    },

    // 获取状态图标（使用统一的订单状态工具函数）
    getStatusIcon(status) {
      const displayStatus = this.getDisplayStatus(status)
      const statusInfo = getOrderStatusDisplay(this.orderType, displayStatus)
      return statusInfo.icon
    },

    // 获取状态颜色（使用统一的订单状态工具函数）
    getStatusColor(status) {
      const displayStatus = this.getDisplayStatus(status)
      const statusInfo = getOrderStatusDisplay(this.orderType, displayStatus)
      return statusInfo.color
    },

    // 获取状态描述（使用统一的订单状态工具函数）
    getStatusDesc(status) {
      const displayStatus = this.getDisplayStatus(status)
      const statusInfo = getOrderStatusDisplay(this.orderType, displayStatus)
      return statusInfo.description
    }
  }
}
</script>

<style scoped>
.order-detail {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #F5F5F5;
}

.content {
  flex: 1;
  padding: 24rpx;
  padding-bottom: 120rpx;
}

.status-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 24rpx;
  padding: 48rpx 32rpx;
  text-align: center;
  margin-bottom: 24rpx;
}

.status-icon {
  font-size: 80rpx;
  margin-bottom: 16rpx;
}

.status-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8rpx;
}

.status-desc {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.section {
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  color: #333;
}

.info-card,
.fee-card,
.timeline-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
}

.info-row,
.address-row,
.user-row,
.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
  font-size: 28rpx;
}

.info-row:last-child,
.fee-row:last-child {
  margin-bottom: 0;
}

.info-row .label,
.address-row .label,
.user-row .label,
.fee-row .label {
  color: #999;
  min-width: 140rpx;
}

.info-row .value,
.fee-row .value {
  flex: 1;
  text-align: right;
  color: #333;
  font-weight: 500;
}

.address-row .address {
  flex: 1;
  text-align: right;
  color: #333;
  font-weight: 500;
  line-height: 1.6;
}

.category-icon {
  margin-right: 8rpx;
}

.code {
  color: #4ECDC4;
  font-weight: bold;
  font-size: 32rpx;
}

.image-row {
  display: flex;
  margin-bottom: 24rpx;
}

.image-row .label {
  color: #999;
  min-width: 140rpx;
  font-size: 28rpx;
}

.image-row .images {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.image-row image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
}

.upload-image {
  border: 2rpx solid #e0e0e0;
}

.user-info {
  flex: 1;
  text-align: right;
}

.user-info .name {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.user-info .phone {
  display: block;
  font-size: 24rpx;
  color: #666;
}

.fee-row.deduction {
  color: #999;
}

.fee-row.deduction .value {
  color: #FF6B6B;
}

.fee-row.highlight {
  color: #4ECDC4;
  padding-top: 16rpx;
  border-top: 1rpx solid #F0F0F0;
}

.fee-row.highlight .label {
  font-weight: bold;
}

.fee-row.highlight .value {
  color: #4ECDC4;
  font-weight: bold;
  font-size: 32rpx;
}

.fee-row.total {
  padding-top: 16rpx;
  border-top: 2rpx solid #E0E0E0;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.fee-row.rider-earning {
  font-size: 32rpx;
  font-weight: bold;
}

.fee-row.rider-earning .label {
  color: #333;
}

.fee-row.rider-earning .value {
  color: #4ECDC4;
  font-size: 40rpx;
  font-weight: bold;
}

/* 退款相关样式 */
.fee-row.refund {
  padding-top: 16rpx;
  border-top: 1rpx solid #F0F0F0;
}

.fee-row.refund .label {
  color: #666;
}

.refund-amount {
  color: #34C759 !important;
  font-weight: bold;
}

.fee-row.compensation-note {
  color: #666;
}

.compensation-amount {
  color: #FF9500 !important;
  font-weight: bold;
}

.refund-note {
  margin-top: 16rpx;
  padding: 16rpx;
  background: #F8F9FA;
  border-radius: 8rpx;
  border-left: 4rpx solid #007AFF;
}

.note-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.timeline-item {
  display: flex;
  margin-bottom: 32rpx;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: relative;
  padding-right: 32rpx;
}

.dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background: #E0E0E0;
  border: 4rpx solid #fff;
  box-shadow: 0 0 0 2rpx #E0E0E0;
}

.dot.active {
  background: #4ECDC4;
  box-shadow: 0 0 0 2rpx #4ECDC4;
}

.line {
  position: absolute;
  left: 12rpx;
  top: 32rpx;
  width: 2rpx;
  height: 48rpx;
  background: #E0E0E0;
}

.timeline-content {
  flex: 1;
}

.step-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 4rpx;
}

.timeline-item.active .step-name {
  font-weight: bold;
  color: #4ECDC4;
}

.step-time {
  font-size: 24rpx;
  color: #999;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.actions {
  display: flex;
  gap: 16rpx;
}

.actions button {
  flex: 1;
  height: 72rpx;
  font-size: 28rpx;
  border-radius: 36rpx;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, #4ECDC4, #44A08D);
  color: #fff;
  font-weight: bold;
}

.btn-secondary {
  background: #F5F5F5;
  color: #666;
}

.btn-text {
  background: transparent;
  color: #4ECDC4;
  border: 1rpx solid #4ECDC4 !important;
}

/* 弹窗遮罩层 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 9999;
}

/* 上传弹窗样式 */
.upload-popup {
  width: 100%;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-close {
  font-size: 48rpx;
  color: #999;
  line-height: 1;
  padding: 0 8rpx;
}

.popup-content {
  flex: 1;
  overflow-y: auto;
  padding: 32rpx;
}

.popup-footer {
  display: flex;
  gap: 24rpx;
  padding: 24rpx 32rpx;
  border-top: 1rpx solid #F0F0F0;
  background: #fff;
}

.popup-footer button {
  flex: 1;
  height: 88rpx;
  font-size: 28rpx;
  border-radius: 44rpx;
  border: none;
}

.btn-cancel {
  background: #F5F5F5;
  color: #666;
}

.btn-confirm {
  background: linear-gradient(135deg, #4ECDC4, #44A08D);
  color: #fff;
  font-weight: bold;
}
</style>

